<template>
    <view class="charge-detail pd-v-24 pd-h-20">
        
        <u-navbar
            title="充电详情"
            :autoBack="true"
            bgColor="rgba(0,0,0,0)"
        >
        </u-navbar>
        <view class="charge-detail__header pd-v-24 pd-t-14">
            <image class="position-a" style="width:100%;left:0;top:0;" src="@/static/cart_bg.png" mode="widthFix"></image>
            <view class="font40 lh-56 bold color-default position-r">
                充电中
            </view>
            <view class="flex flex-center mr-t-10 position-r">
                <u-icon name="eye" size="20"></u-icon>
                <view class="font28 lh-40 color-info mr-l-8 ">
                    {{chargeDetail.storeName}}
                </view>
                  
            </view>


            <!-- <view class="charge-progress mr-t-50">
                <view class="charge-progress__bar full-h position-r">
                    <view class="charge-progress__bar__inner full-w position-a" style="height:60%;">
                        
                    </view>
                      
                </view>
                  
            </view> -->
              
              
              
            
        </view>

        <view class="charge-detail__body">
            <view class="flex pd-v-32 pd-t-32 pd-b-20 bg-white border8">
                <view class="flex-1">
                    <view class="font26 lh-36 color-default txt-center">
                        电价(元/度)
                    </view>
                    <view class="mr-t-16 font48 lh-66 bold txt-center">
                        {{chargeDetail.chargeFee}}
                    </view>
                </view>
                
                <view class="flex-1">
                    <view class="font26 lh-36 color-default txt-center">
                        充电时长(min)
                    </view>
                    <view class="mr-t-16 font48 lh-66 bold txt-center">
                        {{chargeDetail.chargingDuration}}
                    </view>
                </view>
                
                <view class="flex-1">
                    <view class="font26 lh-36 color-default txt-center">
                        充电金额(元)
                    </view>
                    <view class="mr-t-16 font48 lh-66 bold txt-center">
                        {{chargeDetail.orderAmount}}
                    </view>
                </view>
                  
            </view>


            
            <view class="flex mr-t-28">
                <view class="flex-1 mr-r-10  bg-white border8 pd-v-20 pd-h-24 position-r">
                    <view class="font26 lh-36 color-default">
                        开始时间
                    </view>
                    <view class="mr-t-20 font28 lh-40">
                        {{chargeDetail.startTime}}
                    </view>

                    <image class="right-img position-a" src="@/static/time.png" style="width:112rpx" mode="widthFix"></image>
                </view>
                
                <view class="flex-1 mr-l-10  bg-white border8 pd-v-20 pd-h-24 position-r">
                    <view class="font26 lh-36 color-default">
                        钱包余额
                    </view>
                    <view class="mr-t-12 font36 lh-50 bold">
                        {{balance}}
                    </view>
                    
                    <image class="right-img position-a" src="@/static/money.png" style="width:112rpx" mode="widthFix"></image>
                </view>
                  
            </view>
              
           
        </view>


        <view class="charge-detail__footer position-f full-w box pd-v-76">
            
            <u-button type="primary" shape="circle" color="#35BE65" text="结束充电" @click="endCharge"></u-button>
        </view>
          
          
          
  </view>
</template>

<script setup>

import { useStore } from '@/store/index.js';


import { computed, ref, onMounted, reactive,defineProps } from "vue";
import { walletBalance,chargingDetails,endCharging } from '@/api/user.js'
import { onLoad,onUnload } from '@dcloudio/uni-app';

const store = useStore();
const props = defineProps({
    orderId: {
        type: String,
        default: ''
    }
});

const chargeDetail = ref({})
const balance = ref(0)

const isWx = ref(false)
const redirectURL = ref('/pages/index/index')
const list = ref([{isUsed:false},{isUsed:true},{isUsed:true},{isUsed:true},{isUsed:false},{isUsed:false},{isUsed:false},{isUsed:false},])
const activeItem = ref(null)
const timer = ref(null)

onLoad(() => {
    getChargingDetails()
    timer.value = setInterval(() => {
        getChargingDetails()
    }, 5000);
    getWalletBalance()
});

onUnload(() => {
    clearInterval(timer.value)
});


const getWalletBalance = () => {
    walletBalance().then(res => {
        
        if(res.code == 200) {
            balance.value = res.data
        }
    })
}

const getChargingDetails = () => {
    chargingDetails({orderId:props.orderId}).then(res => {
        if(res.code == 200) {
            chargeDetail.value = res.data
        }
    })
}

const setActiveItem = (item) => {
    if(item.isUsed) {
        return;
    }
    activeItem.value = item
}


const endCharge = () => {
    uni.showModal({
        title: '结束充电',
        content: '确定要结束充电吗？',
        success: (res) => {
            if (res.confirm) {
                uni.showLoading({
                    title: '正在结束充电'
                })

                endCharging({orderId:props.orderId}).then(res => {
                    uni.hideLoading()
                    if(res.code == 200) {
                        
                        uni.showToast({
                            title: '结束充电成功',
                            mask:true,
                            duration:1000,
                            success: function () {
                                uni.navigateBack({
                                    delta: 1,
                                });
                            }
                        })
                    }else {
                              uni.showToast({
                                  title: res.msg,
                                  icon: 'none'
                              })
                          }
                }).catch(err => {
                    uni.showToast({
                        title: '结束充电失败',
                        icon:'none'
                    })
                })
            }
        }
    })
}

</script>

<style lang="scss" scoped>
.charge-detail {
    background: #F5F5F5;
    min-height:100vh;

    

    .charge-detail__header {
        padding-top:190rpx;
        height: 440rpx;

        .charge-progress {
            width:140rpx;
            height:256rpx;
            border: 10rpx solid #333;
            border-radius:20rpx;
            box-sizing: border-box;

            .charge-progress__bar {
                width: 92rpx;
                height: 208rpx;
                margin:20rpx auto;

                .charge-progress__bar__inner {
                    
                    background: linear-gradient( 270deg, #7DE55B 0%, #39AAD1 100%);
                    bottom:0;
                    left:50%;
                    transform: translate3d(-50%,0,0);
                }
            }
        }
    }

    .charge-detail__body {
      .right-img {
        right:12rpx;
        top:-14rpx;
      }
    }


    .charge-detail__footer {
        bottom:68rpx;
        left:50%;
        transform: translate3d(-50%,0,0);
    }
} 
</style>
